$(function () {
    function initPolling() {
        $.get(baseUrl + "/wlw/indexDevInfo",
            function (data) {
                if(data) {
                    $.each(data.devWorkInfo,function(i,n){
                        // $(".wl-map-equip-list .wl-map-equip-row").eq(i).find(".wl-map-cell").css("background","red");
                        $(".item-tr").eq(i).find("td").eq(1).text(n.online);
                        $(".item-tr").eq(i).find("td").eq(2).text(n.offline);
                        $(".item-tr").eq(i).find("td").eq(3).text(n.outContact);
                        $(".item-tr").eq(i).find("td").eq(4).text(n.alarm);
                    })
                }
            });
    }

    initPolling();

    function longPolling() {
        window.setInterval(function () {
            initPolling()
        }, 10000);
    }

    longPolling();

    $('.wl-map-window').on('click','.wl-map-close', function () {
        $('.wl-map-window').hide();
    });
});



function chooseMapDev(i) {
    $(".item-tr").removeClass('item-active');
    $(".item-tr").eq(i-1).addClass('item-active');
    $.get(baseUrl + "/wlw/indexDev?type=" + i,function(data){
        loadData(data);
    })
    $('.wlw-item').hide();
    $('.wlw-item').eq(i-1).show();
}

var circleNumber = 1;
var t;

function devCircle() {
    if( circleNumber < 8) {
        chooseMapDev(circleNumber);
        circleNumber =  circleNumber + 1;
    }else {
        circleNumber = 1
    }
    t = setTimeout("devCircle()",10000);
}

devCircle();


function clickDevLi(i) {
    $(".item-tr").removeClass('item-active');
    $(".item-tr").eq(i-1).addClass('item-active');
    $.get(baseUrl+"/wlw/indexDev?type=" +i,function(data){
        loadData(data);
    })
    clearInterval(t);
    $('.wl-map-window').hide();
    $('.wlw-item').hide();
    $('.wlw-item').eq(i-1).show();
}


function clickWindow(obj){
    clearInterval(t);
    var a = obj ;
    var k,v;
    for ( key in a ) {
        k = key ;
        v = a[key];
    }
    initData(k,v);
}

function initData(k,v) {
    $.get(baseUrl+"/wlw/indexDetail?" +k + "=" + v,function(data){
        changePanel (k,v,data);
    })
}

function changePanel (k,v,data) {
    var key = k;
    var value = v;
    switch (key) {
        case "firehydrantNo":
            $('.wl-map-window').hide();
            $('.wl-map-normal').show();
            $('.wl-map-window').empty();
            var html = "";
            html += `<div class="wl-map-window-title wl-map-flexB">
            <h2 class="wl-map-equip-h">消防栓：${data.firehydrantNo}</h2>
            <div class="iconfont icon-chuyidong wl-map-close">X</div>
            </div>
            <div class="wl-map-bottom"></div>
            <div class="wl-map-content wl-map-flexW">
                <p class="wl-map-line">环境温度：<span class="wl-map-value">${data.coverHeartInfo[0].ambientTemperature}</span></p>
                <p class="wl-map-line">电池电压：<span class="wl-map-value">${data.coverHeartInfo[0].batteryVoltage}</span></p>
                <p class="wl-map-line">信号强度：<span class="wl-map-value">${data.coverHeartInfo[0].signalIntensity}</span></p>
                <p class="wl-map-line">倾斜角度：<span class="wl-map-value">${data.coverHeartInfo[0].tiltAngle}度</span></p>
            </div>`;
            $('.wl-map-normal').append(html);

            if(data.workState == '在线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-on');
            }else if(data.workState == '离线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-off');
            }else if(data.workState == '失联'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-loss');
            }else if(data.workState == '告警'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-warn');
                $('.wl-map-normal .wl-map-content').append(`
<p class="wl-map-line">告警原因：<span class="wl-map-value">${data.alarmReason}</span></p>
<p class="wl-map-line">纬度：<span class="wl-map-value">${(data.pointX-0).toFixed(3)}度</span></p>
<p class="wl-map-line">经度：<span class="wl-map-value">${(data.pointY-0).toFixed(3)}度</span></p>`);
            }

            $(".wl-map-normal").dragging({
                move: 'both', //拖动方向，x y both
                randomPosition: false, //初始位置是否随机
                hander:'.wl-map-window-title'
            });
            break;
        case "devNo":
            $('.wl-map-window').hide();
            $('.wl-map-normal').show();
            $('.wl-map-window').empty();
            var html = "";
            html += `<div class="wl-map-window-title wl-map-flexB">
            <h2 class="wl-map-equip-h">窨井盖：${data.devNo}</h2>
            <div class="iconfont icon-chuyidong wl-map-close">X</div>
            </div>
            <div class="wl-map-bottom"></div>
            <div class="wl-map-content wl-map-flexW">
                <p class="wl-map-line">剩余电量：<span class="wl-map-value">${data.coverHeartInfo[0].electricity}%</span></p>
                <p class="wl-map-line">倾斜角度：<span class="wl-map-value">${data.coverHeartInfo[0].inclinationAngle}°</span></p>
                <p class="wl-map-line">信号强度：<span class="wl-map-value">${data.coverHeartInfo[0].signalIntensity}</span></p>
                <p class="wl-map-line">电池电压：<span class="wl-map-value">${data.coverHeartInfo[0].redidualVoltage}</span></p>

            </div>`;
            $('.wl-map-normal').append(html);
            // data.workState = '告警';
            // data.alarmId = 'abacdas';
            // data.alarmReason = '电池充电状态异常';
            // data.alarmTime = 1505909895;
            // data.pointX = 23.11234;
            // data.pointY = 2625.1273;
            if(data.workState == '在线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-on');
            }else if(data.workState == '离线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-off');
            }else if(data.workState == '失联'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-loss');
            }else if(data.workState == '告警'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-warn');
                $('.wl-map-normal .wl-map-content').append(`<p class="wl-map-line">告警ID：<span class="wl-map-value">${data.alarmId}</span></p>
<p class="wl-map-line">告警原因：<span class="wl-map-value">${data.alarmReason}</span></p>
<p class="wl-map-line">纬度：<span class="wl-map-value">${(data.pointX-0).toFixed(3)}度</span></p>
<p class="wl-map-line">经度：<span class="wl-map-value">${(data.pointY-0).toFixed(3)}度</span></p>`);
            }

            $(".wl-map-normal").dragging({
                move: 'both', //拖动方向，x y both
                randomPosition: false, //初始位置是否随机
                hander:'.wl-map-window-title'
            });
            break;
        case "code":
            $('.wl-map-window').hide();
            $('.wl-map-normal').show();
            $('.wl-map-window').empty();
        function code(data) {
            if(data.code == '59637475421aa93a10000001'){
                return 'GWH01'
            }else if(data.code == '57e4949f421aa955a8000003'){
                return 'GWH02'
            }else if(data.code == '5864742d421aa9532a000001'){
                return 'GWH03'
            }else if(data.code == '57e494bc421aa9beb7000003'){
                return 'GWH04'
            }
        }
            var html = "";
            html += `<div class="wl-map-window-title wl-map-flexB">
            <h2 class="wl-map-equip-h">垃圾桶：${code(data)}</h2>
            <div class="iconfont icon-chuyidong wl-map-close">X</div>
            </div>
            <div class="wl-map-bottom"></div>
            <div class="wl-map-content wl-map-flexW">
                <p class="wl-map-line">主电池电压：<span class="wl-map-value">${data.primarybattery}V</span></p>
                <p class="wl-map-line">垃圾桶装载量：<span class="wl-map-value">${data.capacity}</span></p>
                <p class="wl-map-line">纬度：<span class="wl-map-value">${(data.localx-0).toFixed(3)}</span></p>
                <p class="wl-map-line">经度：<span class="wl-map-value">${(data.localy-0).toFixed(3)}</span></p>
            </div>`;

            $('.wl-map-normal').append(html);
            if(data.workState == undefined){
                data.workState = '在线'
            };
            if(data.workState == '在线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-on');
            }else if(data.workState == '离线'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-off');
            }else if(data.workState == '失联'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-loss');
            }else if(data.workState == '告警'){
                $('.wl-map-normal').removeClass('wl-window-on');
                $('.wl-map-normal').removeClass('wl-window-off');
                $('.wl-map-normal').removeClass('wl-window-loss');
                $('.wl-map-normal').removeClass('wl-window-warn');
                $('.wl-map-normal').addClass('wl-window-warn');
                $('.wl-map-normal .wl-map-content').append(`<p class="wl-map-line">告警信息：<span class="wl-map-value">${data.alertInfo}</span></p>`);
            }

            $(".wl-map-normal").dragging({
                move: 'both', //拖动方向，x y both
                randomPosition: false, //初始位置是否随机
                hander:'.wl-map-window-title'
            });
            break;
        case "lampId":
            $('.wl-map-window').hide();
            $('.wl-map-ludeng').show();
            $('.wl-map-window').empty();
            var html = "";
            html += `<div class="wl-map-window-title wl-map-flexB">
              <h2 class="wl-map-equip-h">路灯：${data.cuid}</h2>
              <div class="iconfont icon-chuyidong wl-map-close">X</div>
            </div>
            <div class="wl-map-bottom"></div>
            <div class="wl-map-content wl-map-flexW">
              <p class="wl-map-line">灯头号：<span class="wl-map-value">${data.num}</span></p>
              <p class="wl-map-line">灯杆名：<span class="wl-map-value">${data.name}</span></p>
              <p class="wl-map-line">是否在线：<span class="wl-map-value">${data.workState}</span></p>
              <p class="wl-map-line"><span class="wl-map-switch">开关：<img src="./src/image/switch-on.png" alt="开关" class="switch-control"></span></p>
            </div>`;

            $('.wl-map-ludeng').append(html);

            if(data.workState == '在线'){
                $('.wl-map-ludeng').removeClass('wl-window-on');
                $('.wl-map-ludeng').removeClass('wl-window-off');
                $('.wl-map-ludeng').removeClass('wl-window-loss');
                $('.wl-map-ludeng').removeClass('wl-window-warn');
                $('.wl-map-ludeng').addClass('wl-window-on');
            }else if(data.workState == '离线'){
                $('.wl-map-ludeng').removeClass('wl-window-on');
                $('.wl-map-ludeng').removeClass('wl-window-off');
                $('.wl-map-ludeng').removeClass('wl-window-loss');
                $('.wl-map-ludeng').removeClass('wl-window-warn');
                $('.wl-map-ludeng').addClass('wl-window-off');
            }else if(data.workState == '失联'){
                $('.wl-map-ludeng').removeClass('wl-window-on');
                $('.wl-map-ludeng').removeClass('wl-window-off');
                $('.wl-map-ludeng').removeClass('wl-window-loss');
                $('.wl-map-ludeng').removeClass('wl-window-warn');
                $('.wl-map-ludeng').addClass('wl-window-loss');
            }else if(data.workState == '告警'){
                $('.wl-map-ludeng').removeClass('wl-window-on');
                $('.wl-map-ludeng').removeClass('wl-window-off');
                $('.wl-map-ludeng').removeClass('wl-window-loss');
                $('.wl-map-ludeng').removeClass('wl-window-warn');
                $('.wl-map-ludeng').addClass('wl-window-warn');
                $('.wl-map-ludeng .wl-map-content').append(`<p class="wl-map-line">告警信息：<span class="wl-map-value">${data.alertInfo}</span></p>
<p class="wl-map-line">告警等级：<span class="wl-map-value">${data.alertLevel}</span></p>
<p class="wl-map-line">纬度：<span class="wl-map-value">${(data.lat-0).toFixed(3)}度</span></p>
<p class="wl-map-line">经度：<span class="wl-map-value">${(data.lng-0).toFixed(3)}度</span></p>`);
            }

            $(".wl-map-ludeng").dragging({
                move: 'both', //拖动方向，x y both
                randomPosition: false, //初始位置是否随机
                hander:'.wl-map-window-title'
            });
            if (data.open == "开") {
                $('.switch-control').attr("src","./src/image/switch-on.png");
            }else {
                $('.switch-control').attr("src","./src/image/switch-off.png");
            }
            $('.wl-map-window').on('click', '.switch-control' ,function () {
                $.ajax({
                    type: "get",
                    // url: "src/js/wulianwang.json",
                    url : baseUrl+"/wlw/turnoffon?" + key + "=" + value,
                    dataType: "json",
                    // cache: false,
                    data: {},
                    success: function(data) {
                        if(data.open == "开"){
                            $('.switch-control').attr("src","./src/image/switch-on.png");
                            changeLdIcon(true);
                        }else{
                            $('.switch-control').attr("src","./src/image/switch-off.png");
                            changeLdIcon(false);
                        }
                    }
                });
            });
            break;
        case "logicid":
            $('.wl-map-window').hide();
            $('.wl-map-car').show();
            $('.wl-map-window').empty();
            var html = "";
            html += `<div class="wl-map-window-title wl-map-flexB">
              <h2 class="wl-map-equip-h wl-map-font-on">停车场</h2>
              <div class="iconfont icon-chuyidong wl-map-close">X</div>
            </div>
            <div class="wl-map-bottom wl-map-on"></div>
            <div class="wl-map-car-content">
              <ul>
                <li class="wl-map-li wl-map-li-bottom">
                  <dl class="wl-map-dl wl-map-flexC">
                    <dd class="wl-map-dd wl-map-center">

                    </dd>
                    <dt class="wl-map-dt">编号：<span class="wl-map-car-num">${data[0].logicid}</span></dt>
                  </dl>
                  <dl class="wl-map-dl wl-map-flexC">
                    <dd class="wl-map-dd wl-map-center">

                    </dd>
                    <dt class="wl-map-dt">编号：<span class="wl-map-car-num">${data[1].logicid}</span></dt>
                  </dl>
                  <dl class="wl-map-dl wl-map-flexC">
                    <dd class="wl-map-dd wl-map-center">

                    </dd>
                    <dt class="wl-map-dt">编号：<span class="wl-map-car-num">${data[2].logicid}</span></dt>
                  </dl>
                </li>
                <li class="wl-map-li">
                  <dl class="wl-map-dl wl-map-flexC">
                    <dd class="wl-map-dd wl-map-center">

                    </dd>
                    <dt class="wl-map-dt">编号：<span class="wl-map-car-num">${data[3].logicid}</span></dt>
                  </dl>
                  <dl class="wl-map-dl wl-map-flexC">
                    <dd class="wl-map-dd wl-map-center">

                    </dd>
                    <dt class="wl-map-dt">编号：<span class="wl-map-car-num">${data[4].logicid}</span></dt>
                  </dl>
                </li>
              </ul>
            </div>`;

            $('.wl-map-car').append(html);
            for(var i=0;i < $('.wl-map-dl').length;i++){
                if(data[i].workState == '在线'){
                    $('.wl-map-dl').eq(i).addClass('wl-car-on');
                    if(data[i].currentStatus == '有'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-icon"></span>');
                    }else if(data[i].currentStatus == '无'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-null">空</span>');
                    }
                }else if(data[i].workState == '离线'){
                    $('.wl-map-dl').eq(i).addClass('wl-car-off');
                    if(data[i].currentStatus == '有'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-icon"></span>');
                    }else if(data[i].currentStatus == '无'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-null">空</span>');
                    }
                }else if(data[i].workState == '失联'){
                    $('.wl-map-dl').eq(i).addClass('wl-car-loss');
                    if(data[i].currentStatus == '有'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-icon"></span>');
                    }else if(data[i].currentStatus == '无'){
                        $('.wl-map-dl').eq(i).find('dd').html('<span class="wl-map-car-null">空</span>');
                    }
                }else if(data[i].workState == '告警'){
                    $('.wl-map-dl').eq(i).addClass('wl-car-warn');
                    $('.wl-map-dl').eq(i).find('dd').html('<div class="wl-map-car-mask wl-map-flex"><span class="wl-map-warn-icon"></span><span class="wl-map-warn-cause">'+data[i].alarmreason+'</span></div>');
                    //         $('.wl-map-car').append(`<div class="wl-map-footer wl-map-border-on wl-map-bg-on">
                    //   <p class="wl-map-line">设备负责人：<span class="wl-map-value">${data.contactname}</span></p>
                    //   <p class="wl-map-line">联系方式：<span class="wl-map-value">${data.phonenum}</span></p>
                    // </div>`);
                    if(data[i].currentStatus == '有'){
                        $('.wl-map-dl').eq(i).find('dd').append('<span class="wl-map-car-icon"></span>');
                    }else if(data[i].currentStatus == '无'){
                        $('.wl-map-dl').eq(i).find('dd').append('<span class="wl-map-car-null">空</span>');
                    }
                }
            }
            $(".wl-map-car").dragging({
                move: 'both', //拖动方向，x y both
                randomPosition: false, //初始位置是否随机
                hander:'.wl-map-window-title'
            });
            break;
        default:
            console.log("default")
    }
}
